<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业6</title>
		<style>
			<style>
				input{
					width: 200px;
					height: 40px;
					margin: 3px;
				}
				.info{
					color: lightblue;
					
				}
		</style>
	</head>
	<body>
		<form action="" id="form1">
			用户名：<input id="username" type="text" placeholder="请输入以6-10位的数字,字母,下划线" maxlength="16" autofocus><br />
			<span class="cardInfo info"></span><br />
			密码：<input id="pwd" type="text" maxlength="12"><br />
			<span class="pwdInfo info"></span><br />
			手机号：<input id="phone" type="text" maxlength="12"><br />
			<span class="phoneInfo info"></span><br />
			<button type="submit">提交</button>
			<button type="reset">重置</button><br />
			<span class="formInfo info"></span><br />
		</form>
			
			<script>
				username.addEventListener('focus',function(){
					this.style.backgroundColor="azure";
				});
				username.addEventListener('blur',checkUsername);
				form1.addEventListener('submit',checkForm);
				function checkForm(e){
					e.preventDefault();
					const cardValid = checkUsername.call(username);
					const pwdValid = checkPwd.call(pwd);
					const phoneVaild = checkPhone.call(phone);
					var formInfo = document.querySelector('.formInfo');
					if(cardValid && pwdValid && phoneVaild){
						formInfo.textContent="数据输入正确。表单可以提交！"
						formInfo.style.color = "lightblue";
						this.submit();
					}else{
						formInfo.textContent="数据输入错误。请重新输入！"
						formInfo.style.color = "red";
					}
				}
				function checkUsername(){
					const cardPattern =/^(?=.*[A-Z])(?=.*[a-z])[a-zA-Z0-9_]{6,10}$/;
					var cardInfo =document.querySelector('.cardInfo');
					if(cardPattern.test(this.value)){
						document.querySelector('.cardInfo').textContent = "卡号输入正确";
						cardInfo.style.color = "lightblue";
						return true;
					}else{
						
						cardInfo.textContent = "卡号输入错误，请重新输入";
						cardInfo.style.color = "red";
						this.focus();
						return false;
					}
		
				}
				pwd.addEventListener('focus',function(){
					this.style.backgroundColor="azure";
				});
				pwd.addEventListener('blur',checkPwd);
				function checkPwd(){
					var pwdInfo =document.querySelector('.pwdInfo');
					const pwdPattern = /^(?=.*[A-Z])(?=.*[a-z])[a-zA-Z0-9_]{8,12}$/;
					if(pwdPattern.test(pwd.value)){
						pwdInfo.textContent = "密码输入正确";
						pwdInfo.style.color = "lightblue";
						return true;
					}else{
						pwdInfo.textContent = "密码输入错误";
						pwdInfo.style.color = "red";
						this.focus();
						return false;
					}
					
				}
				phone.addEventListener('focus',function(){
					this.style.backgroundColor="azure";
				});
				phone.addEventListener('blur',checkPhone);
				function checkPhone(){
					var phoneInfo =document.querySelector('.phoneInfo');
					const phonePattern = /^1[3-9]\d{9}$/;
					if(phonePattern.test(phone.value)){
						phoneInfo.textContent = "手机号输入正确";
						phoneInfo.style.color = "lightblue";
						return true;
					}else{
						phoneInfo.textContent = "手机号输入错误";
						phoneInfo.style.color = "red";
						this.focus();
						return false;
					}
					
				}
			</script>
	</body>
</html>